<template>
    <div class="chat-message" :class="message.role === 0 ? 'user' : 'ai'" v-html="message.content">
    </div>
</template>

<script setup>
const props = defineProps({
    message: {
        type: Object,
        required: true
    }
});
</script>

<style scoped>
.chat-message {
    font-size: 18px;
    margin-bottom: 12px;
    max-width: 70%;
    padding: 12px 20px;
    border-radius: 18px;
    word-break: break-word;
    display: block;
    width: fit-content;
}

.chat-message.ai {
    background: #f0f0f0;
    color: #222;
    margin-left: 0;
    margin-right: auto;
}

.chat-message.user {
    background: #6c63ff;
    color: #fff;
    margin-left: auto;
    margin-right: 0;
}
</style>